@import "../common/css/variables.scss";
@import "../../common/css/size.scss";
.navbarM{
  height: $navHeight;
  position: absolute;
  width: 100%;
  bottom: 0;
  border-top: $_1 solid $borderC;
  border-right: none;
  border-left: none;
  .navUl{
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .barItem{
    height: inherit;
    .itemIcon{
      height: $_23;
      width: $_25;
      // background-repeat: no-repeat;
      // background-position: center;
      margin-bottom: 0.1rem;
    }
    span{
      font-size: $_10;
      color: #979797;
    }
  }
  .barItem.active span{
    color: $cMain;
  }

  .barItem:nth-child(1) .itemIcon{
    background:url('../img/nav/home.png') no-repeat center;
    background-size: $_25 $_21;
  }
  .barItem:nth-child(2) .itemIcon{
   
    background: url('../img/nav/product.png') no-repeat center;
    background-size: $_22;
  }
  .barItem:nth-child(3) .itemIcon{
   
    background: url('../img/nav/support.png') no-repeat center;
    background-size: $_23 $_22;
  }
  .barItem:nth-child(4) .itemIcon{
   
    background: url('../img/nav/user.png') no-repeat center;
    background-size: $_21 $_23;
  }

  .barItem:nth-child(1).active .itemIcon{
    
    background: url('../img/nav/homed.png')  no-repeat center ;
    background-size: $_25 $_21;
  }
  .barItem:nth-child(2).active .itemIcon{
   
    background: url('../img/nav/productd.png') no-repeat center ;
    background-size: $_22;
  }
  .barItem:nth-child(3).active .itemIcon{
     
    background: url('../img/nav/supportd.png')  no-repeat center;
    background-size: $_23 $_22;   
  }
  .barItem:nth-child(4).active .itemIcon{
   
    background: url('../img/nav/userd.png')  no-repeat center ;
    background-size: $_21 $_23;
  }
}